<template lang="html">
  <div class="table">
      <div class="crumbs">
          <el-breadcrumb separator="/">
              <el-breadcrumb-item><i class="icon iconfont icon-jifen"></i> 编辑门店</el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      <div class="container">
          <el-form ref="form" :model="store" label-width="150px" @submit.native.prevent>
              <el-form-item label="门店名称">
                <el-input v-model="store.name"></el-input>
              </el-form-item>
              <el-form-item label="门店电话">
                    <el-input v-model="store.telephone" style="width:400px" ></el-input>
                </el-form-item>
              <el-form-item label="门店主图">
                  <div class="sola-upload clearfix">
                      <div class="sola-left clearfix" v-show="bannerPicture.length>0">
                          <div v-for="(item, index) in bannerPicture" class="sola-flex" :key="index">
                              <img  :src="item" />
                              <span class="delete" @click="delPicture(index,item,1)"><i class="el-alert__icon el-icon-error"></i></span>
                          </div>
                      </div>
                      <div class="sola-file-box" v-if="bannerPicture.length<5">
                          <el-button type="primary" plain>上传图片<i class="el-icon-upload el-icon--right"></i></el-button>
                          <input class="btn-file" type="file" @change="uploadBanner"/>

                      </div>
                      <span style="color:red;padding-left:10px;">最多上传五张，(比例规范 高：宽)建议上传的轮播图比例是15：23 示例490X750，每张图片控制在1MB以下</span>
                  </div>
              </el-form-item>

                <el-form-item label="门店地址选择">
                  <div class="city-select">
                    <v-distpicker type="text" :province="select.province" :city="select.city" :area="select.area"  @province="onProvince" @city="onCity" @area="onArea"></v-distpicker>
                  </div>
                </el-form-item>
                <el-form-item label="门店详情图：">
                    <div class="sola-upload clearfix">
                        <div class="sola-left clearfix" v-show="detailPicture.length>0">
                            <div v-for="(item, index) in detailPicture" class="sola-flex" :key="index">
                                <img  :src="item" />
                                <span class="delete" @click="delPicture(index,item,2)"><i class="el-alert__icon el-icon-error"></i></span>
                            </div>

                        </div>
                        <div class="sola-file-box">
                            <el-button type="primary" plain>上传图片<i class="el-icon-upload el-icon--right"></i></el-button>
                            <input class="btn-file" type="file" accept="image/*" @change="uploadDetail"/>
                            <span style="color:red;padding-left:10px;">项目说明、项目规则、拼团说明、拼团规则、商品详情图宽度750*自适应（高度不限制）,图片建议分割几张图片上传,每张图片控制在1MB以下</span>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="经度获取方式" style="width:400px">
                    示例：腾讯地图 坐标器 （提示：经纬度的,标点符号是分割线；请复制经纬度数字进来，不要带上,标点符号）<a href="http://lbs.qq.com/tool/getpoint/index.html"  target="_blank">跳转查看</a>
                    <img src="http://pa6xzs40h.bkt.clouddn.com/jignweidu.jpeg" width="1000px;">
                </el-form-item>
              <el-form-item label="经纬度">
                <el-input v-model="store.latitude"></el-input>
                <el-input v-model="store.longitude"></el-input>
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="onSubmit">确认修改</el-button>
              </el-form-item>
          </el-form>
      </div>
      <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
          <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
          <span slot="footer" class="dialog-footer">
              <el-button @click="delVisible = false">取 消</el-button>
              <el-button type="primary" @click="deleteRow">确 定</el-button>
          </span>
      </el-dialog>
  </div>
</template>

<script>
import VDistpicker from 'v-distpicker'

export default {
  name:'editStore',
  components:{
      VDistpicker
  },
  data (){
      return{
        accept: 'image/gif, image/jpeg, image/png, image/jpg', //图片上传类型
        select:{province: '广东省', city: '广州市', area: '海珠区' }, //省市区
        bannerPicture: [], // 门店主图
        detailPicture: [], // 门店详情图
        delVisible: false,
        cities: 0,
        blocks: 0,
        store:{
            longitude: '',// 门店经纬度
            lantitude: '',
            address: '',// 门店街道地址
            telephone:'',
        },
      }
  },
  watch: {
    
  },
  mounted (){
      this.getDeatils();
  },
  methods:{

    //获取门店的详情数据
    getDeatils (){
        if(this.$route.params.id && this.$route.params.id ){
            this.$axios.get('/manage/store/detail', {
                params: {
                id: this.$route.params.id
                }
            })
            .then(response=>{
                if(response.data.code==200){
                    //获取数据
                    var data = response.data.data;
                    this.store.name = data.name;
                    this.store.telephone = data.telephone;
                    this.store.id = data.id;
                    this.select.province = data.province;
                    this.select.city = data.city;
                    this.select.area = data.district;
                    this.store.address = data.address;
                    this.store.longitude = data.longitude;
                    this.store.latitude = data.latitude;
                    this.bannerPicture = JSON.parse(data.banner_img);
                    this.detailPicture = JSON.parse(data.detail);

                }else{
                    this.$notify.error({
                        title: '查询失败',
                        duration:2000,
                        message: '失败原因：'+response.data.msg
                    });
                }
            })
            .catch(function (response) {
                console.log(response);
            });
        }else{
            this.$message.error('获取门店ID失败');
        }
    },
    //选择省市区
    onSelected(data){
        // console.log("省市区")
        // console.log(data)
        if(data.province.value&&data.province.value!=undefined){
            this.select.province = data.province.value;
        }
        if(data.city.value&&data.city.value!=undefined){
            this.select.city = data.city.value;
        }
        if(data.area.value&&data.area.value!=undefined){
            this.select.area = data.area.value;
        }
        
    },
    // //选择省份
    onProvince(data){
        //console.log("选择省份")
        //console.log(data)
        //this.select.province =data;
        if(data.value&&data.value!=undefined){
            this.select.province = data.value;
        }
    },
    onCity(data){
        //console.log("选择城市")
        //console.log(data)
        if(data.value&&data.value!=undefined){
            this.select.city = data.value;
        }
    },
    onArea(data){
        //console.log("选择地区")
        //console.log(data)
        if(data.value&&data.value!=undefined){
            this.select.area = data.value;
        }
    },
    // 触发上传门店主图
    uploadBanner(event){
        var _event = event;
        var _this = this;
        let reader = new FileReader();
        let img1 = event.target.files[0];
        let type = img1.type;//文件的类型，判断是否是图片
        let size = img1.size;//文件的大小，判断图片的大小
        const files = event.target;
        if(this.accept.indexOf(type) == -1){
            this.$message({
                message: '请选择gif,jpeg,png,jpg格式图片上传',
                type: 'warning'
            });
            return false;
        }else if(size>1048576){
            this.$message({
                message: '请选择1M以内的图片上传',
                type: 'warning'
            });
            return false;
        }else if (typeof(FileReader) === 'undefined') {
            this.$notify.error({
                title: '错误',
                message: '抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！'
            });

        }else {

            let reader = new FileReader();
                reader.readAsDataURL(img1);
                reader.onload = function(e) {
                var base = this.result;
                //console.log(base);
                //_this.$NProgress.start();
                const querystring = require('querystring');
                const param ={
                    base64:base
                }

                _this.$axios.post('/api/common/upload/base64',querystring.stringify(param)).then(response=>{
                    // console.log(response);
                    if(response.data.code==200){
                        _this.$message({
                            message: '恭喜你，图片上传成功',
                            type: 'success'
                        });
                        _this.bannerPicture.push(response.data.data);

                    }else{
                        _this.$notify.error({
                            title: '上传图片失败',
                            duration:2000,
                            message: '失败原因：'+ response.data.msg
                        });
                    }

                }).catch(error=>{
                    console.log(error);
                });

            }
            //把图片转换成功base64


        }
    },
    // 触发上传门店详情图
    uploadDetail(event){
        var _event = event;
        var _this = this;
        let reader = new FileReader();
        let img1 = event.target.files[0];
        let type = img1.type;//文件的类型，判断是否是图片
        let size = img1.size;//文件的大小，判断图片的大小
        const files = event.target;
        if(this.accept.indexOf(type) == -1){
            this.$message({
                message: '请选择gif,jpeg,png,jpg格式图片上传',
                type: 'warning'
            });
            return false;
        }else if(size>1048576){
            this.$message({
                message: '请选择1M以内的图片上传',
                type: 'warning'
            });
            return false;
        }else if (typeof(FileReader) === 'undefined') {
            this.$notify.error({
                title: '错误',
                message: '抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！'
            });

        }else {
            let reader = new FileReader();
                reader.readAsDataURL(img1);
                reader.onload = function(e) {
                var base = this.result;
                //console.log(base);
                //_this.$NProgress.start();
                const querystring = require('querystring');
                const param ={
                    base64:base
                }

                _this.$axios.post('/api/common/upload/base64',querystring.stringify(param)).then(response=>{
                    // console.log(response);
                    if(response.data.code==200){
                        _this.$message({
                            message: '恭喜你，图片上传成功',
                            type: 'success'
                        });
                        _this.detailPicture.push(response.data.data);

                    }else{
                        _this.$notify.error({
                            title: '上传图片失败',
                            duration:2000,
                            message: '失败原因：'+ response.data.msg
                        });
                    }

                }).catch(error=>{
                    console.log(error);
                });

            }
            //把图片转换成功base64
            
        }
    },
    // 删除图片
    delPicture(index, row,typeId){
        //当前记录的下标
        this.idx = index;
        this.typeId = typeId;
        this.delVisible = true;
    },
    deleteRow(){
        if(this.typeId == 1){
            //门店主图
            this.bannerPicture.splice(this.idx,1);
        }else if(this.typeId == 2){
            //门店详情图
            this.detailPicture.splice(this.idx,1);
        }
        this.$message.success('删除成功');
        this.delVisible = false;
    },
    //
    onSubmit (){
        console.log(this.select.city)
        if(this.store.name ==""){
            this.$message.error('请输入门店名称');
            return false;
        }
        if(this.store.telephone ==""){
            this.$message.error('请输入门店电话');
            return false;
        }
        else if(this.bannerPicture.length<1){
            this.$message.error('请先上传门店主图');
            return false;
        }
        else if(this.detailPicture.length<1){
            this.$message.error('请先上传门店详情图');
            return false;
        }
        else if(this.select.province==""||this.select.province==undefined){
            this.$message.error('请选择省份');
            return false;
        }
        else if(this.select.city=="" ||this.select.city==undefined){
            this.$message.error('请选择城市');
            return false;
        }
        else if(this.select.area=="" ||this.select.area==undefined){
            this.$message.error('请输入门店街道地址');
            return false;
        }
        else if(!this.store.longitude || !this.store.latitude){
            this.$message.error('请输入门店经纬度');
            return false;
        }
        else{
          const param =
          {
            id: this.store.id,
            telephone:this.store.telephone, //门店电话
            name:this.store.name,
            province:this.select.province,
            city:this.select.city,
            district: this.select.area,
            address: this.store.address,
            longitude: this.store.longitude,
            latitude: this.store.latitude,
            bannerImg: JSON.stringify(this.bannerPicture),
            detail: JSON.stringify(this.detailPicture)
          }
         this.addStore(param);
        }
      },
      addStore (param){
          var _this = this
          const querystring = require('querystring');
          this.$axios.post('/manage/store/modify',querystring.stringify(param)).then(response=>{
              //console.log(response);
              console.log(querystring.stringify(param))
              if(response.data.code==200){
                  this.$message({
                      message: '门店修改成功',
                      type: 'success'
                  });
                  setTimeout(function(){
                    // console.log("jump jump")
                    // _this.$router.push({path:"/store"})
                  },1500);

              }
              else{
                console.log(response.data.code)
                  this.$notify.error({
                      title: '添加失败',
                      duration:2000,
                      message: '失败原因：'+response.data.msg
                  });
              }

          }).catch(error=>{
              console.log(error);
          });
      },

  }
}
</script>

<style lang="stylus" scoped>
.el-form-item .el-cascader{
    width :400px;
}
.el-cascader-menus .el-cascader-menu{
    width :240px
}
.sola-upload{
    .sola-left{
        width :100%;
        height :auto;
        .sola-flex{
            float:left
            width: 360px;
            height: 180px;
            margin-bottom 20px;
            margin-right:15px;
            position:relative;
            .delete{
                position:absolute;
                top:2px;
                right:13px;
                color: #f56c6c;
                display:inline-block;
                padding:5px 5px;
                .el-alert__icon{font-size:28px;cursor:pointer}
            }
            img {
                width:100%;
                height:100%;
            }
        }
    }
    .sola-file-box{
        position:relative;
        .btn-file{
            position:absolute;
            top:0;
            left:0;
            z-index 1;
            opacity:0;
            width :120px;
            height :40px;
            outline: 0;
            background-color :none;
            cursor:pointer;
        }
    }
}
</style>
